<template>
  <div class="name_container">
    <ul>
      <!--
      key用于Vue内部虚拟DOM与真实DOM的Diff算法，不会展示在页面元素上。
      1、虚拟DOM中key的作用：
        key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后进行新虚拟DOM与旧虚拟DOM的差异比较。
      2、新旧虚拟DOM的比较规则：
      1、旧虚拟DOM中找到了与新虚拟DOM相同的key
        1.1、若虚拟DOM的内容没有发生变化，则直接使用之前的真实DOM。
        1.2、若虚拟DOM的内容发生了变化，则更新旧的虚拟DOM，并生成新的真实DOM，随后替换掉页面中之前的真实DOM。
      2、旧虚拟DOM中没有找到与新虚拟DOM相同的key
        生成新的虚拟DOM与新的真实DOM。
      -->
      <li v-for="p in persons" :key="p.no">
        姓名:{{ p.name }}, 年龄：{{ p.age }}
        <input type="text"> 
      </li>
    </ul>
  </div>
  <button @click="insertHead">在数组头部位置插入一个或者多个元素</button>
  <br>
  <br>
  <button @click="removeHead">移除数组第一个位置的元素</button>
  <br>
  <br>
  <button @click="appendTail">数组尾部追加一个或者多个元素</button>
  <br>
  <br>
  <button @click="removeTail">从数组尾部移除一个元素</button>
  <br>
  <br>
  <button @click="insertElement">在数组的指定位置插入一个或者多个元素</button>
  <br>
  <br>
  <button @click="removeElement">从数组的指定位置移除一个或者多个元素</button>
  <br>
  <br>
  <button @click="replaceElement">从数组指定位置移除一个或者多个元素，同时插入一个或者多个元素</button>
  <br>
  <br>
  <button @click="sortElement">对数组中的元素进行指定规则的排序</button>
  <br>
  <br>
  <button @click="filterElement">过滤数组中符合指定条件的元素</button>
</template>
<script setup>
import { reactive, ref } from 'vue';
const persons = reactive([
  {
    no: 1,
    name: "zhangsan",
    age: 18,
  },
  {
    no: 2,
    name: "lisi",
    age: 19,
  },
  {
    no: 3,
    name: "wangwu",
    age: 20,
  },
])

// 在数组头部位置插入一个或者多个元素
function insertHead() {
  persons.unshift({
    no: 4,
    name: "zhaoliu",
    age: 17,
  })
}

// 移除数组第一个位置的元素
function removeHead() {
  persons.shift()
}

// 在数组尾部追加一个或者多个元素
function appendTail() {
  persons.push({
    no: 5,
    name: "sunqi",
    age: 21,
  })
}


// 从数组尾部移除一个元素
function removeTail() {
  persons.pop({
    no: 5,
    name: "sunqi",
    age: 21,
  })
}

// 在数组的指定位置插入一个或者多个元素
function insertElement() {
  persons.splice(1, 0, {
    no: 5,
    name: "sunqi",
    age: 21,
  })
}

// 从数组的指定位置移除一个或者多个元素
function removeElement() {
  persons.splice(1, 1)
}

// 从数组指定位置移除一个或者多个元素，同时插入一个或者多个元素
function replaceElement() {
  persons.splice(1, 1, {
    no: 6,
    name: "zhouba",
    age: 22,
  }, {
    no: 7,
    name: "wujiu",
    age: 23,
  })
}

// 对数组中的元素进行指定规则的排序
function sortElement() {
  persons.sort((a, b) => {
    return b.age - a.age;
  })
}

// 过滤数组中符合指定条件的元素。不会改变原数组，会返回一个新的数组
function filterElement() {
  const filtered = persons.filter((item)=>{
    return item.name === 'zhangsan'
  })
  console.log(filtered)
  persons.splice(0, persons.length)
  persons.push(...filtered)
}
</script>

<style scoped></style>